<template>
  <div class="all" v-loading="loading">
    <div class="box" v-for="(tabledata,i) in container" :key="i">
      <!-- <div class="allhead">
        <span>{{tabledata.type}}预览</span>
      </div> -->

      <div class="oneselect-cotainer" v-if="tabledata.type=='单选题'||tabledata.type=='单项选择题'">
        <div class="oneselect-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">单选</span>
          <span class="oneselect-header-title">{{tabledata.smallTopic}}</span>
          <span class="score">({{tabledata.fraction}}分)</span>
        </div>
        <div class="oneselect-body" v-for="(item,i2) in tabledata.options" :key="i2">
          <i
            :class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
            :style="{color:item.keyTrue ? '#67c23a' : 'red'}"
          ></i>
          <span>{{String.fromCharCode(i2+65)}}</span>
          .{{item.context}}
        </div>
        <div v-for="(item2,i2) in tabledata.options" :key="'info-'+i2">
          <div class="oneselect-floote-answer" v-if="item2.keyTrue">
            答案：
            <span>{{String.fromCharCode(i2+65)}}</span>
            .{{item2.context}}
          </div>
        </div>
        <div class="oneselect-floote">
          小题讲解：
          <span class="answer">{{tabledata.explains}}</span>
        </div>
      </div>

      <div class="more-cotainer" v-if="tabledata.type=='多选题'||tabledata.type=='多项选择题'">
        <div class="more-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">多选</span>
          <span class="oneselect-header-title">{{tabledata.smallTopic}}</span>
          <span class="score">({{tabledata.fraction}}分)</span>
        </div>
        <div class="more-body" v-for="(item,i2) in tabledata.options" :key="i2">
          <i
            :class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
            :style="{color:item.keyTrue ? '#67c23a' : 'red'}"
          ></i>
          {{String.fromCharCode(i2+65)}}
          .{{item.context}}
        </div>
        <div class="more-floote">
          <span class="more-floote-answer">答案：{{tabledata.answer}}</span>
        </div>
        <div class="more-floote">
          <span class="answer">小题讲解：{{tabledata.explains}}</span>
        </div>
      </div>

      <div class="bank-cotainer" v-if="tabledata.type=='填空题'">
        <div class="bank-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">填空</span>
          <span class="oneselect-header-title">{{tabledata.smallTopic}}</span>
        </div>
        <div class="bank-floote">
          <div class="bank-floote-answeritem">
            <div>
              <span>答案：</span>
            </div>
            <div class="bank-floote-answeritem-body">
              <span class="bank-floote-answer" v-for="(item,i) in tabledata.options" :key="i">
                {{item.answer}}
                <span>({{item.fraction}}分)</span>
              </span>
            </div>
          </div>
          <div>
            <span class="bank-floote-explains">小题讲解：{{tabledata.explains}}</span>
          </div>
        </div>
      </div>

      <div class="oneselect-cotainer" v-if="tabledata.type=='判断题'">
        <div class="oneselect-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">判断</span>
          <span class="oneselect-header-title">{{tabledata.smallTopic}}</span>
          <span class="score">({{tabledata.fraction}}分)</span>
        </div>
        <div class="judge-chose">
          <div class="judge-chose-item">
            <i
              :class="tabledata.answer=='true'  ? 'el-icon-success' : ''"
              :style="{color:tabledata.answer=='true' ? '#67c23a' : ''}"
            ></i>正确
          </div>
          <div class="judge-chose-item">
            <i
              :class="tabledata.answer!='true'  ? 'el-icon-success' : ''"
              :style="{color:tabledata.answer!='true'  ? '#67c23a' : ''}"
            ></i>错误
          </div>
        </div>
        <div class="judge-floote-answeritem">
          答案：
          <span>{{tabledata.answer=='true' ? '正确' : '错误'}}</span>
        </div>
        <div class="judge-floote">
          小题讲解：
          <span class="answer">{{tabledata.explains}}</span>
        </div>
      </div>

      <div class="brief-cotainer" v-if="tabledata.type=='简答题'">
        <div class="more-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">简答</span>
          <span class="oneselect-header-title">{{tabledata.smallTopic}}</span>
          <span class="score">({{tabledata.fraction}}分)</span>
        </div>
        <div class="brief-item">
          <el-image
            v-for="(item,index) in tabledata.imgList"
            :key="index"
            class="brief-img-detail"
            :src="item"
            :preview-src-list="tabledata.imgList"
          >></el-image>
        </div>
        <div class="brief-file">
          <div class="brief-file-down" v-for="(item,index) in tabledata.fileList" :key="index">
            <span>文件{{index+1}}</span>
            <el-link target="_blank" :href="item.url" :underline="false" style="margin-left:15px">
              <el-button size="mini" type="warning">点击下载</el-button>
            </el-link>
          </div>
        </div>
        <div class="brief-body">
          <span>答案：{{tabledata.answer}}</span>
        </div>
        <div class="brief-floote">
          <span>小题讲解：{{tabledata.explains}}</span>
        </div>
      </div>



      <div class="brief-cotainer" v-if="tabledata.type=='大题'">
        <div class="more-header">
          <span style="font-size:18px">{{i+1}}.</span>
          <span class="type">大题</span>
          <span class="oneselect-header-title">{{tabledata.bigQuestion}}</span>
          <span class="score">({{tabledata.fraction}}分)</span>
        </div>
        <div class="brief-item">
          <el-image
            v-for="(item,index) in tabledata.imgList"
            :key="index"
            class="brief-img-detail"
            :src="item"
            :preview-src-list="tabledata.imgList"
          >></el-image>
        </div>
        <div class="brief-file">
          <div class="brief-file-down" v-for="(item,index) in tabledata.fileList" :key="index">
            <span>文件{{index+1}}</span>
            <el-link target="_blank" :href="item.url" :underline="false" style="margin-left:15px">
              <el-button size="mini" type="warning">点击下载</el-button>
            </el-link>
          </div>
        </div>

        <div v-for="(item,i2) in tabledata.bankList" :key="i2">
          <div class="oneselect-cotainer" v-if="item.type=='单选题'||item.type=='单项选择题'">
            <div class="oneselect-header">
              <span style="font-size:18px">（{{i2+1}}）</span>
              <span class="type">单选</span>
              <span class="oneselect-header-title">{{item.smallTopic}}</span>
              <span class="score">({{item.fraction}}分)</span>
            </div>
            <div class="oneselect-body" v-for="(item2,i3) in item.options" :key="i3">
              <i
                :class="item2.keyTrue ? 'el-icon-success' : 'el-icon-error'"
                :style="{color:item2.keyTrue ? '#67c23a' : 'red'}"
              ></i>
              <span>{{String.fromCharCode(i3+65)}}</span>
              .{{item2.context}}
            </div>
         <div v-for="(item2,i3) in item.options" :key="'info-'+i3">
           <div class="oneselect-floote-answer" v-if="item2.keyTrue">
            答案：
            <span>{{String.fromCharCode(i3+65)}}</span>
            .{{item2.context}}
           </div>
        </div> 
            <div class="more-floote">
              <span class="answer">小题讲解：{{item.explains}}</span>
            </div>
          </div>

          <div class="more-cotainer" v-if="item.type=='多选题'||item.type=='多项选择题'">
            <div class="more-header">
              <span style="font-size:18px">（{{i2+1}}）</span>
              <span class="type">多选</span>
              <span class="oneselect-header-title">{{item.smallTopic}}</span>
              <span class="score">({{item.fraction}}分)</span>
            </div>
            <div class="more-body" v-for="(item2,i3) in item.options" :key="i3">
              <i
                :class="item2.keyTrue ? 'el-icon-success' : 'el-icon-error'"
                :style="{color:item2.keyTrue ? '#67c23a' : 'red'}"
              ></i>
              {{String.fromCharCode(i3+65)}}
              .{{item2.context}}
            </div>
            <div class="more-floote">
              <span class="more-floote-answer">答案：{{item.answer}}</span>
            </div>
            <div class="more-floote">
              <span class="answer">小题讲解：{{item.explains}}</span>
            </div>
          </div>

          <div class="oneselect-cotainer" v-if="item.type=='判断题'">
            <div class="oneselect-header">
              <span style="font-size:18px">（{{i2+1}}）</span>
              <span class="type">判断</span>
              <span class="oneselect-header-title">{{item.smallTopic}}</span>
              <span class="score">({{item.fraction}}分)</span>
            </div>
            <div class="judge-chose">
              <div class="judge-chose-item">
                <i
                  :class="item.answer=='true'  ? 'el-icon-success' : ''"
                  :style="{color:item.answer=='true' ? '#67c23a' : ''}"
                ></i>正确
              </div>
              <div class="judge-chose-item">
                <i
                  :class="item.answer!='true'  ? 'el-icon-success' : ''"
                  :style="{color:item.answer!='true'  ? '#67c23a' : ''}"
                ></i>错误
              </div>
            </div>
            <div class="judge-floote-answeritem">
              答案：
              <span>{{item.answer=='true' ? '正确' : '错误'}}</span>
            </div>
            <div class="judge-floote">
              小题讲解：
              <span class="answer">{{item.explains}}</span>
            </div>
          </div>

          <div class="bank-cotainer" v-if="item.type=='填空题'">
            <div class="bank-header">
              <span style="font-size:18px">（{{i2+1}}）</span>
              <span class="type">填空</span>
              <span class="oneselect-header-title">{{item.smallTopic}}</span>
            </div>
            <div class="bank-floote">
              <div class="bank-floote-answeritem">
                <div>
                  <span>答案：</span>
                </div>
                <div class="bank-floote-answeritem-body">
                  <span class="bank-floote-answer" v-for="(item2,i4) in item.options" :key="i4">
                    {{item2.answer}}
                    <span>({{item2.fraction}}分)</span>
                  </span>
                </div>
              </div>
              <div>
                <span class="bank-floote-explains">小题讲解：{{item.explains}}</span>
              </div>
            </div>
          </div>

          <div class="brief-cotainer" v-if="item.type=='简答题'">
            <div class="more-header">
              <span style="font-size:18px">（{{i2+1}}）</span>
              <span class="type">简答</span>
              <span class="oneselect-header-title">{{item.smallTopic}}</span>
              <span class="score">({{item.fraction}}分)</span>
            </div>
            <div class="brief-item">
              <el-image
                v-for="(item2,index2) in item.imgList"
                :key="index2"
                class="brief-img-detail"
                :src="item2"
                :preview-src-list="item.imgList"
              >></el-image>
            </div>
            <div class="brief-file">
              <div class="brief-file-down" v-for="(item2,index2) in item.fileList" :key="index2">
                <span>文件{{index2+1}}</span>
                <el-link
                  target="_blank"
                  :href="item2.url"
                  :underline="false"
                  style="margin-left:15px"
                >
                  <el-button size="mini" type="warning">点击下载</el-button>
                </el-link>
              </div>
            </div>
            <div class="brief-body">
              <span>答案：{{item.answer}}</span>
            </div>
            <div class="brief-floote">
              <span>小题讲解：{{item.explains}}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
import { search } from "@/api/topic/showDetail";
export default {
  name: "showitem",
  props: ["row"],
  data() {
    return {
      // 遮罩层

      loading: true,
      exhead: "http://10.168.100.154" + process.env.VUE_APP_BASE_API,
      container: [],
      showimgList: [],
      imgurl: "",
      showfileList: [],
      beanName: "",
      pointptions: [
        {
          label: "对",
          value: true,
        },
        {
          label: "错",
          value: false,
        },
      ],
      options: [
        {
          answer: "sdsada",
          fraction: 2,
        },
        {
          answer: "sdsada",
          fraction: 2,
        },
        {
          answer: "sdsada",
          fraction: 2,
        },
      ],
    };
  },
  created() {
    this.gosearch();
  },
  methods: {
    gosearch() {
        this.container = this.row.bankList
        console.log("container",this.container);
      if(this.container!=null){
        for (let j = 0; j < this.container.length; j++) {
          //处理简答题和大题的图片
          if (this.container[j].beanName == "shortAnswerServiceImpl"||this.container[j].beanName == "bigQuestionServiceImpl") {
            this.container[j].imgList = [];
            this.container[j].fileList = [];
            let imgtemplatedata = [];
            let filetemplatedata = [];
            if (this.container[j].fileUrl) {
              filetemplatedata = this.container[j].fileUrl.split(",");
              for (let k = 0; k <= filetemplatedata.length-2; k++) {
                const data = {
                  url: this.exhead + filetemplatedata[k],
                  name: filetemplatedata[k],
                };
                this.container[j].fileList[k] = data;
              }
            }
          
            if (this.container[j].imgUrl) {
              imgtemplatedata = this.container[j].imgUrl.split(",");
              for (let k = 0; k <= imgtemplatedata.length - 2; k++) {
                this.container[j].imgList[k] = this.exhead + imgtemplatedata[k];
              }
            }
           
          }
          
         //大题内简答题的图片和文件处理
        if(this.container[j].bankList!=null){
        for (let h = 0; h < this.container[j].bankList.length; h++) {
          if (this.container[j].bankList[h].beanName == "shortAnswerServiceImpl") {
            this.container[j].bankList[h].imgList = [];
            this.container[j].bankList[h].fileList = [];
            let imgtemplatedata = [];
            let filetemplatedata = [];
           
            if (this.container[j].bankList[h].fileUrl) {
              filetemplatedata = this.container[j].bankList[h].fileUrl.split(",");
              for (let k = 0; k <= filetemplatedata.length-2; k++) {
                const data = {
                  url: this.exhead + filetemplatedata[k],
                  name: filetemplatedata[k],
                };
                this.container[j].bankList[h].fileList[k] = data;
              }
            }
            if (this.container[j].bankList[h].imgUrl) {
              imgtemplatedata = this.container[j].bankList[h].imgUrl.split(",");
              for (let k = 0; k <= imgtemplatedata.length - 2; k++) {
                this.container[j].bankList[h].imgList[k] = this.exhead + imgtemplatedata[k];
              }
            }
           
          }
          
        }
                   
      }



        }
      }
      
      console.log("图片处理后",this.container)
        this.loading = false;
    },
    download(data) {
      //  let url=data.filename;
      // this.download(data);
      //  this.download(this.showfileList[data].url)
    },
  },
};
</script>

<style>
.kong {
  width: 100%;
  height: 5px;
}
.rule {
  font-size: 18px;
  font-weight: 500;
  color: #909399;
}
.all {
  width: 100%;
  height: 100%;
  /* background-color: #E4E7ED; */
}
.box {
  padding-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.allhead {
  text-align: center;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}
.oneselect-header-title {
  font-size: 18px;
  color: #303133;
}
.type {
  font-size: 16px;
  color: #67c23a;
  border: 1px solid #67c23a;
  margin-right: 10px;
}
.body-chose1 {
  color: #67c23a;
}
.body-chose2 {
  color: #f56c6c;
}
.score {
  color: #909399;
  margin-left: 5px;
}
.answer {
  font-size: 18px;
  color: #67c23a;
}
.oneselect-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.oneselect-header {
  font-size: 16px;
  color: #303133;
}
.oneselect-body {
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.oneselect-floote {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.oneselect-floote-answer {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.more-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.more-header {
  font-size: 16px;
  color: #303133;
}
.more-body {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: #303133;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
}
.more-floote {
  margin-top: 10px;
  font-size: 18px;
  padding-bottom: 10px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.more-floote-answer {
  margin-top: 10px;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.bank-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.bank-header {
  font-size: 16px;
  color: #303133;
}
.bank-body {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote {
  margin-top: 20px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answer {
  margin-left: 10px;
  color: #303133;
}
.bank-floote-answeritem {
  display: flex;
  font-size: 18px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answeritem-body {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}
.bank-floote-explains {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
}
.judge-chose {
  margin-top: 15px;
  padding-bottom: 10px;
  display: flex;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.judge-chose-item {
  margin-left: 20px;
  font-size: 18px;
  color: #303133;
}
.brief-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.judge-floote {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.judge-floote-answeritem {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-header {
  font-size: 16px;
  color: #303133;
}
.brief-body {
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-floote {
  margin-top: 20px;
  padding-bottom: 20px;
  margin-left: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-item {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.brief-img-detail {
  width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}
.brief-file {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  justify-content: center;
  color: #909399;
}
.brief-file-down {
  font-size: 18px;
  margin-top: 20px;
}
</style>